<template>
  <!--顶部 搜索栏-->
  <div class="box-item search-box box-item-row">
    <div class="">
      <el-input v-model="searchData.name" style="width: 240px;margin-right: 10px;" placeholder="输入角色名称..." />
      <el-select
      v-model="searchData.state"
      placeholder="选择状态"
      clearable
      size="large"
      style="width: 240px;margin-right: 10px;"
    >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    <el-select
      v-model="searchData.type"
      placeholder="是否菜单"
      clearable
      size="large"
      style="width: 240px;margin-right: 10px;"
    >
    <el-option
        v-for="item in isMenu"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

    </div>
    <div>
      <el-button type="primary" @click="searchlist(1)">搜索</el-button>
      <el-button type="primary" @click="searchlist(2)">重置</el-button>
    </div>
  </div>
  <!--头部 工具栏 添加 批量删除等-->
  <div class="box-item tool-box box-item-row">
    <div style="margin-right: 10px;">
      <el-button type="primary" @click="showAddModal">添加</el-button>
    </div>
  </div>
  <!--中部 内容栏 表格等-->
  <div class="box-item table-box">

    <el-table
      :data="tableData.data"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="id" label="ID" sortable />
      <el-table-column prop="title" label="菜单" sortable />
      <el-table-column prop="path" label="路径" sortable />
      <el-table-column label="类型">
      <template #default="scope">
        <el-tag :type="scope.row.type == 1?'primary':'info'">{{ scope.row.type == 1?'菜单':'方法' }}</el-tag>
      </template>
    </el-table-column>
      <el-table-column label="状态">
      <template #default="scope">
        <el-tag :type="scope.row.state == 1?'success':'danger'">{{ scope.row.state == 1?'正常':'禁用' }}</el-tag>
      </template>
    </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="editAddModal(scope.$index,scope.row)"
            >编辑</el-button
          >
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(scope.$index, scope.row.id)"
            >详情</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--底部 分页操作栏-->
  <div class="box-item page-box">
    <el-pagination
      v-model:current-page="tableData.current_page"
      v-model:page-size="tableData.per_page"
      :page-sizes="[15, 20, 30, 50, 100, 200, 300, 400]"
      :small="true"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!--模态框 添加 编辑-->
  <div>
    <addModal
        ref="addDia"
        :list="chooseData"
        :ruleMenu="ruleMenu"
        @useClose="addUseClose"
        @useConfirm="addUseConfirm"
      ></addModal>
  </div>

</template>
<script setup>
import { onMounted, onUnmounted, getCurrentInstance, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import addModal from "./add.vue";
const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;

//表格数据元素
const tableData = reactive({
    total: 0, //总数
    per_page: 10, //每页显示
    current_page: 1, //当前页
    last_page: 1, //最后一页的页码
    data: [], //数据列表
});
//搜索元素组
const searchData = reactive({
  name:'',//名称
  state:'',//状态
  type:''//是否菜单
});
//编辑或删除或详情选中的数据
const chooseData = ref({
      id:0,
      title: "", // 菜单名称
      path:"",//跳转路径
      icon:"",//图标标识
      pid:'',//上一级id
      type: 1, // 角色组说明
      state:'',//状态
      sort:9999,//排序标识
    });
const chooseIndex = ref(0); //选中的表格数据下标

const addDia = ref(null);
const ruleMenu = ref([]);
const options = [
  {
    value: 0,
    label: '禁用',
  },
  {
    value: 1,
    label: ' 启用',
  }
]
const isMenu = [
  {
    value: 0,
    label: '方法',
  },
  {
    value: 1,
    label: ' 菜单',
  }
]


onMounted(() => {
  getList();//权限菜单列表
  //权限菜单数组数据
  setTimeout(()=>{
    getRuleArr();
  },1000); //延迟1s请求
  
});

//获取列表信息
const getList = () => {
  const params ={ page:tableData.current_page,title:searchData.name,state:searchData.state,type:searchData.type,limit:tableData.per_page}; 
  $api.get("v1/login/sys/rule/list",params).then((res) => {
    if (res.code == 200) {
      // tableData = reactive(res.data);
      Object.assign(tableData,res.data);
      // console.log(res.data);
    }
  });
};
//获取权限菜单二级数组
const getRuleArr = () => {
  $api.get("v1/login/sys/rule/rule_arr",{}).then((res) => {
    if (res.code == 200) {
      // console.log(res.data);
      ruleMenu.value = res.data;
    }
  });
};
//改变每页显示的数量
const handleSizeChange = (val) => {
   tableData.per_page = val;
   getList();
};
//改变当前页码
const handleCurrentChange = (val) => {
  tableData.current_page = val;
  getList();
};
//搜索
const searchlist = (type) =>{
  //重置搜索条件
  if(type == 2){
    searchData.name="";
    searchData.state ="";
    searchData.type = "";
  }
  getList();
  
};
//编辑数据
const editAddModal =  (index,item) =>{
  // console.log(index,obj,"444");
  // const item = tableData.data[index];
  if(item.state == 1){
    item.state = true;
  }else{
    item.state = false;
  }
  chooseData.value = item;
  chooseIndex.value = index;
  nextTick(()=>{
     showAddModal();
  });
  
};
//显示添加模态框
const showAddModal = () => {
  addDia.value.dialogVisble = true; //更改值
};
//关闭弹出框
const addUseClose = (e) => {
  chooseData.value = {
      id:0,
      title: "", // 菜单名称
      path:"",//跳转路径
      icon:"",//图标标识
      pid:'',//上一级id
      type: 1, // 角色组说明
      state:'',//状态
      sort:9999,//排序标识
    };
  // console.log(e, "关闭");
  // 二次确认删除
  //   ElMessageBox.confirm("确定要新增吗？", "提示", {
  //     type: "warning",
  //   })
  //     .then(() => {
  //       ElMessage.success("新增成功");
  //     })
  //     .catch(() => {});
};
//弹出框提交按钮
const addUseConfirm = (obj) => {
  chooseData.value = {
      id:0,
      title: "", // 菜单名称
      path:"",//跳转路径
      icon:"",//图标标识
      pid:'',//上一级id
      type: 1, // 角色组说明
      state:'',//状态
      sort:9999,//排序标识
    }; //重置选中值
  // console.log(obj);
  $api.post('v1/login/sys/rule/add',obj).then((res)=>{
        if(res.code == 200){
          getList();
        }
        // handleLogin(res.data); //存储登录状态
      })
};

//表格操作 - 指定数据/行间操作（编辑,删除等）
const handleClick = (index, id) => {
  console.log("click", index, id);
};

</script>
<style></style>
